<template>
  <div class="container-box">
    <h2>收费项目管理
</h2>
    &nbsp;
    <span>用于展示收费项目列表信息，以及增加、修改、删除等操作</span>
    <!--表单区域-->
    <div class="table-box">
      <!--操作区域-->
      <el-row type="flex" justify="space-between" class="tool-bar">
        <div>
          <el-form
            ref="form"
            label-position="top"
            label-width="80px"
            :inline="true"
            size="small"
          >
            <el-form-item label="小区名称">
              <el-select
                v-model="queryData.community_code"
                placeholder="请输入"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code" /></el-select
            ></el-form-item>
            <el-form-item label="项目名称">
              <el-input v-model="queryData.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="时间">
              <div class="block">
                <el-date-picker
                  v-model="timeVlaue"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </div>
            </el-form-item>
            <el-form-item class="weizhia">
              <el-button @click="onSearchReset">重置</el-button>
              <el-button type="primary" @click="onSearchSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
      <div class="dada">
        <el-card
          class="bottom"
          shadow="always"
          :body-style="{ padding: '20px' }"
        >
          <el-row type="flex" justify="space-between" align="middle">
            <div class="left" />
            <div class="right">
              <el-button
                type="primary"
                plain
                size="small"
                @click="dialogShow = true"
                >新增</el-button
              >
            </div>
          </el-row>
          <el-table :data="list" stripe>
            <!-- prop表示这一列展示哪个数据 -->
            <el-table-column
              prop="id"
              label="ID"
            width="40%"
            />
            <el-table-column prop="community.name"   width="130%" label="小区名称" />
            <el-table-column prop="code"   width="350%" label="收费项目编号" />
            <el-table-column prop="name" label="项目名称" />
            <el-table-column prop="create_time" label="创建时间" />

            <!-- 表格列个性化渲染 -->
            <!-- <el-table-column prop="icon" label="图标class">
          <template slot-scope="scope">
            <b>{{ scope.row.icon }}</b>
            <i :class="`fa ${scope.row.icon}`" />
          </template>
        </el-table-column> -->

            <!-- <el-table-column prop="sort_num" label="权重" /> -->
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button size="small" type="text" @click="editRow(row.id)"
                  >编辑</el-button
                >&nbsp;
                <el-popconfirm title="确定删除吗？" @confirm="delRow(row.id)">
                  <el-button slot="reference" size="small" type="text"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
    <!--分页区域-->
    <div class="page">
      <el-pagination
        :current-page.sync="queryData.current"
        :page-sizes="[4, 8, 10, 20]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>

    <div class="div_fot">Ant Design Pro黑马前端合肥前端欢迎您</div>
    <div class="div_foot">&copy;2023 悦兴物业集团</div>
    <!-- 弹框区域 -->
    <el-dialog
    class="teshude"
      :title="title"
      :visible.sync="dialogShow"
      width="40%"
      @close="btnCancel"

    >
      <el-form ref="form"    :model="formData" :rules="formRules" label-width="120px" size="normal">
        <el-form-item label="所属小区:" prop="community_code">
          <el-select    placeholder="请选择" size="medium"     v-model="formData.community_code"  class="da" >
          <el-option v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                 
                    ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称:" prop="name">
          <el-input    placeholder="请输入"  class="dd" v-model="formData.name" />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button size="small" @click="dialogShow=false">取消</el-button>
        <el-button size="small" type="primary" @click="btnOk">提交</el-button>
       
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import {
  getProjectListApi,
  getsApi,
  getNameAp,
  addProjectApi,
  editoleApi,
  delRoleApi,
} from "@/api/project";
// import { getTagList, addTag, editTag, getTagInfo, delTag } from '@/api/tag'
export default {
  name: "Tag",
  data() {
    return {
      timeVlaue: "",
      list: [],
      options: [],
      queryData: {
        current: 1,
        pageSize: 10,
      
        create_time: "",
      
      },

      formData: {
        code: "",
        community: "",
        community_code: "",
        name: "",
        create_time: "",      
        id: "",
      },
      formRules: {
        desc: [{ required: true, message: "不能为空", trigger: "blur" }],
        house: [{ required: true, message: "不能为空", trigger: "blur" }],
        lift: [{ required: true, message: "不能为空", trigger: "blur" }],
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
        community_code: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      // 总数
      total: 0,
      // 控制弹框的显示
      dialogShow: false,
    };
  },
  computed: {
    title() {
      return this.formData.id ? "修改楼栋" : "添加楼栋";
    },
  },
  watch: {
    timeVlaue() {
      console.log(this.timeVlaue);
      this.queryData.create_time = +new Date(this.timeVlaue[0]);
     const end_time = +new Date(this.timeVlaue[1]);
      const timearray = [this.queryData.create_time, end_time];
      this.queryData.create_time = timearray.join(",");
      console.log(this.queryData.create_time);
    },
  },
  created() {
    this.initData();
    this.getNameApia();
  },
  methods: {
    // 获取数据
    async initData() {
      const res = await getProjectListApi(this.queryData);
      console.log(res);
      this.list = res.data.rows;
      this.list = this.list.map((item) => {
        item.create_time = this.$moment(item.create_time).format(
          "YYYY-MM-DD h:mm:ss"
        );
        return item;
      });
      //  .forEach(item => {
      // // JSON.stringify(item.community)
      //   item.community = item.community.name
      // })
      console.log(this.list);
      this.total = res.data.count;
    },
    async getNameApia() {
      const res = await getNameAp();
      console.log(res);
      this.options = res.data;
      console.log(this.options);
    },
    // 筛选表单搜索条件
    onSearchSubmit() {
      this.queryData.current = 1;
      this.initData();
    },
    // 筛选表单重置
    onSearchReset() {
      this.queryData = {
        current: 1,
        pageSize: 10,
        community_code: "",
        create_time: "",
        end_time: "",
      };
      this.timeVlaue = "";
      this.initData();
    },
    // 每页数量切换事件
    sizeChange(val) {
      console.log(val);
      this.queryData.pageSize = val;
      this.initData();
    },
    // 页码切换事件
    currentChange(val) {
      console.log(val);
      this.queryData.current = val;
      this.initData();
    },
    // 新增/修改标签
    async btnOk() {
      await this.$refs.form.validate();
      
      this.formData.id
        ? await editoleApi(this.formData)
        : await addProjectApi(this.formData);

      // await this.$refs.form.validate()

      this.$message.success(this.formData.id ? "修改楼栋成功" : "添加楼栋成功");
      this.dialogShow = false;
      this.initData();
    },
    // 清空表单和校验
    btnCancel() {
      this.formData = {
        catename: "",
        icon: "",
        sort_num: 10,
      };
      this.$refs.form.clearValidate();
    },
    // 修改标签
    async editRow(id) {
      // this.formData.id = id
      const res = await getsApi(id);
      console.log(res);
      this.formData = res.data;
      console.log(this.formData);
      this.dialogShow = true;
    },
    // 删除标签
    async delRow(id) {
      console.log("1");
      await delRoleApi(id);
      this.$message.success("删除成功");
      if (this.queryData.current > 1 && this.list.length === 1) {
        this.queryData.current--;
      }
      this.initData();
    },
  },
};
</script>
<style>
body {
  background-color: rgb(247, 248, 250);
  padding: 30px;
}
h2 {
  display: inline-block;
}
.container-box {
  padding: 30px;
}
.filter-form,
.tool-bar {
  background-color: rgb(255, 255, 255);
  padding: 15px;
  margin-bottom: 10px;
}
.tool-bar .weizhia {
  position: absolute;
  margin-top: 39px;
  margin-left:250px;
}

.dada .dadw {
  height: 22px;
}
.div_fot {
  font-size: 15px;
  color: rgb(86, 87, 87);

  margin-top:60px;


  text-align: center;

  width: 100%;
}
.div_foot {
  margin-top: 20px;

  font-size: 15px;


  text-align: center;

  width: 100%;
}
.dada .bottom {
  margin-top: 30px;
}
.teshude .da{
  width:340px;
height: 50px;
}
.teshude .dd{
  width:340px;
height: 50px;
}

</style>
